<template>
	<view class="content">
		<view class="demo1">
			<view class="ball ball1"></view>
			<view class="ball ball2"></view>
			<view class="ball ball3"></view>
			<block v-for="(item,index) in assistantList" :key="index">
				<view class="ball" :style="{
					width:item.width ? item.width : item.size,
					height:item.height ? item.width : item.size,
					background: item.avatar ? 'center / contain no-repeat url('+item.avatar+')': 'linear-gradient(90deg,'+item.color1+','+item.color2+')',
					top:item.top,
					left:item.left,
					border: item.size ? '' :'2rpx solid #9A24B9'
				}" style="position: absolute;" @click="choseBall(item)">
					<!-- <text class="text">{{item.label}}</text> -->
				</view>
			</block>

		</view>
	</view>
</template>
<script>
	import circle from './circle.js'
	import middle_circles from './middle_circle.js'
	import min_circles from './min_circle.js';
	export default {
		data() {
			return {
				circles: [
					...middle_circles,
					...min_circles,
					...circle,
				],
				assistantList: [
					...middle_circles,
					...min_circles,
				]
			};
		},
		mounted() {
			this.getList()
		},

		methods: {
			choseBall(item) {
				if (item.user_id) {
					uni.navigateTo({
						url: '/pages/help/detail?user_id=' + item.user_id
					})
				}
				// if (item.hasOwnProperty('path')) {
				// 	this.$emit('circleTapComplete', item)
				// }
			},

			//获取助教列表
			async getList() {
				uni.showLoading({
					title: '请稍后'
				})
				let res = await this.$api.meadowlands.getMainAssistant.get({
					limit: 30
				})
				uni.hideLoading()
				if (res.code == 0) {
					// 更换预设圆点的ID、名称。新增头像字段
					let tempRes = res.data
					circle.forEach((item, index) => {
						if (tempRes[index]) {
							this.assistantList.push({
								...item,
								user_id: tempRes[index].user_id,
								label: tempRes[index].assistant_name,
								avatar: tempRes[index].avatar
							})
						}
					})
				} else {
					this.$tool.error(res.msg);
				}
			}
		}
	}
</script>
<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
	}

	.demo1 {
		position: relative;
		width: 100%;
		height: 100%;
		color: #fff;
		border-radius: 50%;
		animation: rorate-demo 36s linear infinite;
	}

	.demo1 .ball {
		position: absolute;
		// width: 60rpx;
		// height: 60rpx;
		border-radius: 50%;
		font-size: 24rpx;
		animation: rorate-ball 36s linear infinite;

		.text {
			position: absolute;
			top: 50%;
			left: 50%;
			text-wrap: nowrap;
			word-wrap: normal;
			white-space: nowrap;
			transform: translate(-50%, 120%);
			font-size: 22rpx;
		}
	}


	@keyframes rorate-demo {
		0% {
			transform: rotate(0) rotate(0);
		}

		100% {
			transform: rotate(0) rotate(360deg);
		}
	}

	@keyframes rorate-ball {
		0% {
			transform: rotate(0) rotate(0);
		}

		100% {
			transform: rotate(0) rotate(-360deg);
		}
	}

	// .ball1 {
	// 	top: 0;
	// 	left: 50%;
	// 	background-color: #0ff;
	// }

	// }

	// .ball2 {
	// 	top: 56%;
	// 	left: 50%;
	// 	background-color: #ffc;
	// }

	// .ball3 {
	// 	top: 10%;
	// 	left: 20%;
	// 	background-color: #ff0000;
	// }
</style>